import React,{useState} from 'react'

import { Form, Input, Button, Select, Spin, message, Upload } from 'antd';
import ImgUpload from '../../components/ImgUpload'
import { jobCfyPub } from '../../api/job'

const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 12,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 11,
    span: 16,
  },
};

const CfyPublish= () => {
  const [form] = Form.useForm();
  let [loading,setLoading]=useState(false)
  let [imgurl,setImgurl]=useState("")


  const onFinish = (values) => {
    setLoading(true)
    let data = { ...values, cfyimg:imgurl }
    jobCfyPub(data).then(res=>{
      setLoading(false)
      if (res.status===201){
        message.success('上传成功');
        onReset();
      }
    }).catch(err=>{
      console.log(err)
      message.error('上传失败,请重试')
    })
  };

  const onReset = () => {
    form.resetFields();
  };

  const getImgurl=(imgurl)=>{ //从ImgUpload子组件获取imgurl路径
    // console.log("父组件获取",imgurl);
    setImgurl(imgurl)
  }

  return (
    <Spin spinning={loading} size="large" tip="正在上传内容,请稍事等待">
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="cfyname"
          label="分类名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="cfytype"
          label="职位分类"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="选择职位分类"
            allowClear
          >
            <Option value="0">全职</Option>
            <Option value="1">实习</Option>
            <Option value="2">兼职</Option>
          </Select>
        </Form.Item>
        
        <Form.Item
          name="cfyimg"
          label="分类图标"
        >
          <ImgUpload getImgurl={getImgurl}/>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default CfyPublish;